<template>
  <div>
    <el-card style="margin-bottom:10px">
    <!-- 查询部分 -->
    <query-conponent
      :tableData="tableData"
      @PagingQueryAssignment="PagingQueryAssignment"
      @ResetData="
        (value) => {
          if (value) {
            this.ResetData();
          }
        }
      "
      @isDialog="
        (value) => {
          this.isDialog = value;
        }
      "
      @Modify="
        (value) => {
          this.Modify = value;
        }
      "
      @isEditTable="
        (value) => {
          this.isEditTable = value;
        }
      "
    />
    </el-card>

    <el-card>
    <!-- 主体列表 -->
    <main-part
      :paging="paging"
      :name="name"
      @isDialog="
        (value) => {
          this.isDialog = value;
        }
      "
      @Modify="
        (value) => {
          this.Modify = value;
        }
      "
      @isEditTable="
        (value) => {
          this.isEditTable = value;
        }
      "
      @ruleForm="
        (value) => {
          RuleFormAssignment(value);
        }
      "
      @ReplaceType="
        (value) => {
          if (value) {
            this.ReplaceType();
          }
        }
      "
      @inquire="
        (value) => {
          if (value) {
            this.DeletedPage();
          }
        }
      "
    />

    <!-- 分页 -->
    <paging-component
      :name="name"
      :totalCount="totalCount"
      @totalCount="
        (value) => {
          (this.totalCount = value), this.PagingQuery();
        }
      "
      @NamePageSize="
        (value) => {
          name.pageSize = value;
        }
      "
      @NamePageNum="
        (value) => {
          (name.pageNum = value), this.PagingQuery();
        }
      "
    />

    <!-- 弹出层 -->
    <popup-component
      :Modify="Modify"
      :isDialog="isDialog"
      :ruleForm="ruleForm"
      :isEditTable="isEditTable"
      :itemtableData="itemtableData"
      @ResetData="
        (value) => {
          if (value) {
            this.ResetData();
          }
        }
      "
      @isDialog="
        (value) => {
          this.isDialog = value;
        }
      "
      @dialogVisible="
        (value) => {
          this.dialogVisible = value;
        }
      "
      @inquire="
        (value) => {
          if (value) {
            this.inquireEmpty();
          }
        }
      "
    />
    </el-card>

    <!-- <button @click="randomString(16)">点击添加</button>
    <span>{{ result }}</span> -->
  </div>
</template>

<script>
import {
  DropDownList,
  PagingQuer,
  // IndexNew,
  // SourceUpdate,
  isLogin,
} from "@/assets/js/api";
import commentFn from "./components/conmmen";
import PopupComponent from "./components/PopupComponent";
import QueryConponent from "./components/QueryConponent";
import MainPart from "./components/MainPart";
import PagingComponent from "@/components/PagingComponent";
export default {
  components: { PopupComponent, QueryConponent, MainPart, PagingComponent },
  data() {
    return {
      // 要随机的数
      //  str :"0123456789abcdefghijklmnopqrstuvwxyz",
      // 返回的随机数
      //  result : "",
      //总页数
      totalCount: null,
      // 添加和编辑
      Modify: "",
      //弹窗表单
      ruleForm: {
        id: "",
        dataSourceName: "",
        dataSourceUrl: "",
        dbName: "",
        dataSourceUserName: "",
        dataSourceType: "",
        dataSourcePwd: "",
        dataSourceDesc: "",
      },
      // 是否禁用
      isEditTable: false,
      // v-if
      dialogVisible: false,
      // 向后台传的分页数据
      name: {
        pageNum: 1,
        pageSize: 10,
        dataSourceType: null,
      },
      // 当前页
      pageNum: 1,
      // 每页条数
      PageSize: 10,
      //表格数据
      tableData: [],
      // 添加里的列表
      itemtableData: [],
      // 列表数据
      paging: [],
      // 弹出层
      isDialog: false,
    };
  },
  async created() {
    let res = await isLogin();
    if (res.code == 0) {
      this.souarData(); //初始化列表接口调用
      this.PagingQuery();
    } else {
      this.login();
    }
  },
  methods: {
    // 生成随机字符串
    // randomString(length) {
    //   for (var i = length; i > 0; --i){
    //     this.result += this.str[Math.floor(Math.random() * this.str.length)];
    //   }
    // },
    // 删除的分页
    DeletedPage() {
      this.totalCount -= 1;
      if (
        this.totalCount == (this.name.pageNum - 1) * this.name.pageSize &&
        this.totalCount != 0
      ) {
        this.name.pageNum -= 1;
        this.PagingQuery();
      } else {
        this.PagingQuery();
      }
    },
    // 每条数据
    RuleFormAssignment(row) {
      this.ruleForm = {
        id: row.id,
        dataSourceName: row.dataSourceName,
        dataSourceUrl: row.dataSourceUrl,
        dbName: row.dbName,
        dataSourceUserName: row.dataSourceUserName,
        dataSourceType: row.dataSourceType,
        dataSourcePwd: row.dataSourcePwd,
        dataSourceDesc: row.dataSourceDesc,
      };
    },
    // 搜索
    PagingQueryAssignment(res) {
      this.name.pageNum = res.pageNum;
      this.name.pageSize = res.pageSize;
      this.name.dataSourceType = res.dataSourceType;
      this.PagingQuery();
    },
    // 单点登录地址
    login() {
      let url =
        "/data-conf-center-server/login?referUrl=" + window.location.href;
      window.location.href = url;
    },
    // 清空表单数据
    ResetData() {
      this.ruleForm = {
        id: "",
        dataSourceName: "",
        dataSourceUrl: "",
        dbName: "",
        dataSourceUserName: "",
        dataSourceType: "",
        dataSourcePwd: "",
        dataSourceDesc: "",
      };
    },
    // 无条件页面更新
    inquireEmpty() {
      this.name.pageNum = 1;
      this.name.pageSize = 10;
      this.name.dataSourceType = "";
      this.PagingQuery();
    },

    // 数据源分页查询
    async PagingQuery() {
      let res = await PagingQuer(this.name);
      if (res.code == 0) {
        this.totalCount = res.data.totalCount;
        res.data.list.forEach((e) => {
          e.isClass = "isStyle";
        });
        this.paging = res.data.list;
        this.ReplaceId();
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
    // 将id替换成类型
    ReplaceId() {
      for (let i = 0; i < this.paging.length; i++) {
        commentFn.data.forEach((e, s) => {
          this.paging[i].dataSourceType == commentFn.data[s].id
            ? (this.paging[i].dataSourceType = commentFn.data[s].name)
            : "";
        });
      }
    },
    // 将类型替换成id
    ReplaceType() {
      let item = this.ruleForm;
      commentFn.data.forEach((e, s) => {
        item.dataSourceType == commentFn.data[s].name
          ? (item.dataSourceType = commentFn.data[s].id)
          : "";
      });
    },
    async souarData() {
      //调用列表接口
      let res = await DropDownList();
      if (res.code == 0) {
        this.tableData = res.data;
        this.itemtableData = res.data;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: "error",
        });
      }
    },
  },
};
</script>
<style scoped>
.onebox {
  margin-left: 30px;
}
::v-deep .el-input__inner {
  height: 30px;
}

.el-table {
  width: auto;
}
.add_to {
  color: #000;
  margin-left: 50px;
}
</style>
